<template>
    <div>字符串：{{s}}</div>
    <div>数字：{{b +1}}</div>
    <div>
        {{arr.map(v=>(v+'_8888'))}}
    </div>
    <div v-for="(item,index) in arr" :key="index">
        {{index +':'+item}}
    </div>
    <button @click="changearr">改数组</button>
    <button v-on:click="changearr" >改数组 第二种事件绑定</button>
    <button @[event]="changearr" >改数组 第三种事件绑定</button>

    <div v-text="s1">

    </div>
    <div v-html="texthtml"></div>
    <div v-if="false">
        v-if=true   当v-if=true的时候显示这里
    </div>
    <div v-else>
        v-else
    </div>
    <div @click="parent">
        <button @click.stop="child">stop组织事件冒泡</button>
    </div>
    <div v-bind:id="id">演示v-bind</div>
    <div :id="idmaohao">冒号演示v-bind</div>

    <div :class="[cls?'a':'b','c']" class="d">style 控制</div>
    <!--    <div v-for="(item in arr)" ></div>-->

    <div v-for="item in arr" v-memo="[item==2]">
        {{item}}
    </div>
    <input v-model="name" type="text"/>
</template>

<script setup lang="ts">
    import {ref} from 'vue';
    const s:string="我的字符串"
    const event="click"
    const s1:string="我的字符串v-text"
    const texthtml:string='<div style="color: red;">我是一段v-html 不支持组件</div>';
    const b:number=1
    const arr:number[] =ref<number[]>([1,2,3])
    const id="id123"
    const idmaohao="id123maohao"
    const cls:boolean=true
    const name=ref("v-model")
    let changearr=()=>{
        arr.value=[3,4,5]
    }
    let child=() => {
        console.log("child")
    }
    let parent = ()=> {
        console.log('parent')
    }
    // export default {
    //     name: "App.vue"
    // }
</script>

<style scoped>
 .a{
     color: red;
 }
    .b{
        color: blue;
    }
    .c{
        font-size: 30px;
    }
    .d{
        /*斜体*/
        font-style: italic;
    }
</style>